import React, { useState } from 'react';
import styles from './personScore.less';
import { DatePicker, Button, Input, Table, Form, Select, Spin } from 'antd';
import { Link } from 'react-router-dom';
import request from '@/http';
import qs from 'qs';
import { getTeam } from '@/pages/admin/pulic';
import { Homework } from '@/pages/login/service';
import { history } from '@/.umi/core/history';
const { RangePicker } = DatePicker;
const { Option } = Select;

export default () => {
  const [formObject] = Form.useForm();

  const [dataSource, setDataSource] = React.useState<any[]>([]);
  const [loadingState, setLoadingState] = React.useState({ loading: true });
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 20,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
    showQuickJumper: true,
  });

  const loadDataSource = async (
    userParams: any,
    pageValue: any,
    pageSize: any,
  ) => {
    const ds = {
      ...userParams,
      current: pageValue ? pageValue : 1,
      size: pageSize ? pageSize : 5,
    };
    console.log(ds);
    const result: any = await request.post(
      '/api/admin/adminScore/getPersonScorePage',
      qs.stringify(ds),
    );
    console.log('---------------------------------');
    console.log('个人评分：', result);
    if (result && result.code == 200) {
      const data: any = result.data.records.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,

        studentId: user.studentId, //需要给下页 查询的Id
        courseId: user.courseId, //需要给下页 查询的Id
        sex: user.sex, // 性别
        userNo: user.userNo,
        collegesName: user.collegesName,
        courseName: user.courseName,
        majorName: user.majorName,
        teamName: user.teamName,
        position: user.position,
        score: user.score,

        jobNumber: user.jobNumber,

        teacherName: user.teacherName,
        responsibilityTeacher: user.responsibilityTeacher,

        studentName: user.studentName, //姓名

        leaderName: user.leaderName,
        comments: user.comments,
      }));

      const newPageObject = {
        ...pagination,
        current: pageValue,
        size: pageSize,
        total: result.recorsds, //总条数 分页               *******************
      };

      setPagination(newPageObject);
      setDataSource(data);
      setLoadingState({ loading: false });
      // console.log(data)
    }
  };

  let cCourse = localStorage.getItem('course');
  if (cCourse != null) {
    var cCourseData = JSON.parse(cCourse);
  }

  let cTeam = localStorage.getItem('team');
  if (cTeam != null) {
    var cTeamData = JSON.parse(cTeam);
  }

  //搜索
  const searchOnClick = async () => {
    setLoadingState({ loading: true });
    console.log(formObject.getFieldsValue());
    const data = await formObject.validateFields();
    var dataStr = '';
    var ds = {
      ...data,
    };
    console.log(ds);

    await loadDataSource(ds, 1, pagination.pageSize);
  };

  //生命周期函数
  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize);
    getTeam();
    // getGroup();
  }, []);

  //换页
  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  return (
    <div className="pageMain">
      <div className="pageContent">
        <div className="search" style={{ width: '1200px', height: '120px' }}>
          <div className={styles.searchForm}>
            <Form layout="inline" form={formObject}>
              <Form.Item label="项目名称" name="courseName" initialValue="">
                <Select className="personScoreSelect">
                  <Option value="">请选择...</Option>
                </Select>
              </Form.Item>

              <Form.Item label="小组名称" name="teamName" initialValue="">
                <Select className="personScoreSelect">
                  <Option value="">请选择...</Option>
                  {cTeamData
                    ? cTeamData.map((item: any, index: any) => {
                        return (
                          <Option
                            index={index}
                            key={index}
                            value={item.teamName}
                            children={item.teamName}
                          />
                        );
                      })
                    : ''}
                </Select>
              </Form.Item>

              <Form.Item>
                <Button type="primary" onClick={searchOnClick}>
                  查询
                </Button>
                <Button
                  style={{ margin: '0 8px' }}
                  onClick={() => {
                    formObject.resetFields();
                  }}
                >
                  重置
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>

        <div className={styles.mainTable}>
          <Spin tip="Loading..." spinning={loadingState.loading}>
            <Table
              columns={[
                {
                  title: '院系',
                  dataIndex: 'collegesName',
                  key: 'collegesName',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '项目名称',
                  dataIndex: 'courseName',
                  key: 'courseName',
                  width: 75,
                  align: 'center',
                },

                {
                  title: '小组',
                  dataIndex: 'teamName',
                  key: 'teamName',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '姓名',
                  dataIndex: 'studentName',
                  key: 'studentName',
                  width: 75,
                  align: 'center',
                },
                {
                  key: 'studentId',
                  width: 0.0001,
                  align: 'center',
                },
                {
                  key: 'courseId',
                  width: 0.0001,
                  align: 'center',
                },
                {
                  key: 'responsibilityTeacher',
                  width: 0.0001,
                  align: 'center',
                },

                {
                  title: '学号',
                  dataIndex: 'userNo',
                  key: 'userNo',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '性别',
                  dataIndex: 'sex',
                  key: 'sex',
                  width: 50,
                  align: 'center',
                },
                {
                  title: '项目角色',
                  dataIndex: 'position',
                  key: 'position',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '综合评分',
                  dataIndex: 'score',
                  key: 'score',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '作业评分',
                  key: 'workScore',
                  align: 'center',
                  width: 75,
                  render: (row: any) => (
                    <>
                      <Link to={{ pathname: 'psDetail', state: { ...row } }}>
                        <Button type="link">查看详情</Button>
                      </Link>
                    </>
                  ),
                },
              ]}
              dataSource={dataSource}
              pagination={pagination}
              onChange={pageOnChange}
              tableLayout="fixed"
              bordered
            />
          </Spin>
        </div>
      </div>
    </div>
  );
};
